import { Component } from "react";

export default class Mouse extends Component {
  state = {
    x: 0,
    y: 0,
  };
  // 监听鼠标移动事件
  componentDidMount() {
    window.addEventListener("mousemove", this.handleMouseMove);
  }

  // 监听鼠标移动事件
  componentWillUnmount() {
    window.removeEventListener("mousemove", this.handleMouseMove);
  }

  handleMouseMove = (e) => {
    this.setState({
      x: e.clientX,
      y: e.clientY,
    });
  };

  render() {
    // return (
    //   <div>
    //     <p>x坐标为：{this.state.x}</p>
    //     <p>y坐标为：{this.state.y}</p>
    //   </div>
    //   <div>
    //     <img
    //     style={{
    //       position: 'absolute',
    //       left: this.state.x + 'px',
    //       top: this.state.y + 'px'
    //     }}
    //     src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fwww.uusucai.com%2Fd%2Ffile%2Fweb%2Fgif%2F2015%2F06%2F21%2Fc57a5f87fe8d074a81660caeb02c24a6.gif&refer=http%3A%2F%2Fwww.uusucai.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1668565545&t=e052aebc9be3de38a9a308a39d164fa8" />
    //   </div>
    // );
    return this.props.render(this.state);
  }
}
